<template>
<div class="">
  <transition name="fade">
    <div v-if="isShow" @click="hide" class="mask"></div>
  </transition>
  <transition name="slide">
    <div class="rate" v-if="isShow">
      <p class="txt-c f16 p-b15">送货频次</p>
      <van-icon name="cross" size="22" class="close-icon" @click="hide" />
      <van-radio-group class="" v-model="selectRate" :icon-size="16">
        <div v-for="item in rateList" class="m-t15" :key="item.id">
          <!-- {{ item.fre_name }} -->
          <van-radio :name="item.id">
            <span class="f14"> {{ item.fre_name }} </span>
          </van-radio>
        </div>
      </van-radio-group>
      <div class="m-t40">
        <van-button color="#1989fa" @click="submit" block class="m-t20" type="primary">确认</van-button>
      </div>
    </div>
  </transition>
</div>
</template>

<script>
// import { computed, onMounted, reactive, ref, watch } from 'vue'
import { mapState } from 'vuex'

export default {
  props:{
    isShow: Boolean,
    rateId: Number,
    oId: [Number, String]
  },
  data(){
    return{
      show: true,
      selectRate: '',
    }
  },
  computed: mapState({
     rateList: state => state.delivery.rateList
  }),
  watch:{
    // 监听父级的新的number
    oId(a, b){
      console.log(a, b);
      this.$store.dispatch('getRate', a)
    }
  },
  created(){
    console.log(this.oId)
    this.selectRate = this.rateId;
    this.$store.dispatch('getRate', this.oId)
    // if(this.$store.state.delivery.rateInit){
    // this.$store.dispatch('getRate', this.oId)
    // }
  },
  methods:{
    hide(){
      this.$emit('hide')
    },
    submit(){
      this.$emit('submitRate', this.selectRate);
      this.$emit('hide')
    }
  },
  // setup(props, {emit}){
  //   const show = ref(true);
  //   let selectRate=ref('');

  //   onMounted(()=>{
  //     // setTimeout(()=>{
  //       selectRate.value = props.rateId;
  //       console.log(selectRate)
  //     // },200)
  //   })

  //   watch(props, (newProps, oldProps)=>{
  //     selectRate.value = newProps.rateId;
  //   })
    
  //   let store = useStore();
    

  //   return{
  //     show,
  //     hide,
  //     rateList: computed(() => store.state.delivery.rateList),
  //     selectRate,
  //     submit
  //   }
  // }
}
</script>

<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.slide-enter-active,
.slide-leave-active {
  transform: translate3d(0,0,0);
  transition: 0.5s ease;
}

.slide-enter-from,
.slide-leave-to {
  transform: translate3d(0,100%,0);
  transition: 0.5s ease;
}
  .mask{
    background: rgba(0,0,0,.3);
    position: fixed;
    z-index:1000;
    width: 100%;
    height: 100%;
    top: 0;
  }
  .rate{
    width: 100%;
    position: fixed;
    height: 39%;
    bottom: 0;
    z-index: 9999;
    background: #fff;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding: 20px;
    padding-bottom: 40px;
    box-shadow:0px 10px 10px 10px #888;
  }
  .close-icon{
    position: absolute;
    right: 10px;
    top: 10px;
  }
  .m-t40{
    margin-top: 40px;
  }
</style>